<template>
  <ContentCard>
    <template #header>
      <pageHeaderNew
        title="离职问题库"
        :breadCrumb="['人事', '基础设置', '离职设置', '离职问题库']"
        show-back
      ></pageHeaderNew>
    </template>
    <ConditionBox :margin-bottom="20">
      <template #left>
        <a-input-search
          :style="{ width: '320px' }"
          placeholder="请输入离职问题"
          search-button
          v-model="searchVal"
          @search="onSearch"
        >
          <template #button-icon>
            <icon-search />
          </template>
        </a-input-search>
      </template>
      <template #right>
        <a-button type="primary" @click="add">新增问题 </a-button>
        <a-button type="outline" @click="remove(null)" status="danger"
          >批量删除</a-button
        >
      </template>
    </ConditionBox>
    <div class="wrap">
      <a-tabs
        lazy-load
        :default-active-key="1"
        v-model="curTab"
        @change="(e)=> tabChange(e as
      number)"
      >
        <a-tab-pane :key="1" title="离职申请审批中问题库">
          <TableTurn
            ref="tableRef"
            :tableData="getData1"
            style="margin-top: 20px"
            :args="args"
          >
            <a-table-column :width="80" align="center">
              <template #title> 序号 </template>
              <template #cell="{ rowIndex }">
                {{ rowIndex + 1 }}
              </template>
            </a-table-column>
            <a-table-column
              align="center"
              :width="200"
              title="离职问题"
              data-index="question"
            ></a-table-column>
            <a-table-column
              align="center"
              :width="100"
              title="适用范围"
              data-index="scopeApply"
            >
              <template #cell="{ record }">
                {{
                  record.scopeApply === 1 ? '离职申请审批中' : '离职申请审核后'
                }}
              </template>
            </a-table-column>
            <a-table-column
              align="center"
              :width="200"
              title="描述"
              data-index="remark"
            ></a-table-column>
            <a-table-column
              align="center"
              title="操作"
              :width="200"
              fixed="right"
            >
              <template #cell="{ record }">
                <a-tooltip content="编辑">
                  <IconFont
                    type="icon-edit"
                    :size="26"
                    :style="{
                      marginRight: '10px',
                      cursor: 'pointer'
                    }"
                    @click="goEdit(record)"
                  />
                </a-tooltip>
                <a-tooltip content="删除" position="left">
                  <a-popconfirm
                    content="是否确认删除该条数据?"
                    @ok="remove(record.id)"
                  >
                    <IconFont
                      type="icon-delete"
                      :size="26"
                      :style="{
                        marginRight: '10px',
                        cursor: 'pointer'
                      }"
                    />
                  </a-popconfirm>
                </a-tooltip>
              </template>
            </a-table-column>
          </TableTurn>
        </a-tab-pane>
        <a-tab-pane :key="2" title="离职申请审批后问题库">
          <TableTurn
            ref="table"
            :tableData="getData2"
            style="margin-top: 20px"
            :args="args"
          >
            <a-table-column align="center" :width="80">
              <template #title> 序号 </template>
              <template #cell="{ rowIndex }">
                {{ rowIndex + 1 }}
              </template>
            </a-table-column>
            <a-table-column
              align="center"
              :width="200"
              title="离职问题"
              data-index="question"
            ></a-table-column>
            <a-table-column
              align="center"
              :width="100"
              title="适用范围"
              data-index="scopeApply"
            >
              <template #cell="{ record }">
                {{
                  record.scopeApply === 1 ? '离职申请审批中' : '离职申请审核后'
                }}
              </template>
            </a-table-column>
            <a-table-column
              align="center"
              :width="200"
              title="描述"
              data-index="remark"
            ></a-table-column>
            <a-table-column
              align="center"
              title="操作"
              :width="200"
              fixed="right"
            >
              <template #cell="{ record }">
                <a-space :size="0">
                  <a-tooltip content="编辑">
                    <IconFont
                      type="icon-edit"
                      :size="26"
                      :style="{
                        marginRight: '10px',
                        cursor: 'pointer'
                      }"
                      @click="goEdit(record)"
                    />
                  </a-tooltip>
                  <a-tooltip content="删除" position="left">
                    <a-popconfirm
                      content="是否确认删除该条数据?"
                      @ok="remove(record.id)"
                    >
                      <IconFont
                        type="icon-delete"
                        :size="26"
                        :style="{
                          marginRight: '10px',
                          cursor: 'pointer'
                        }"
                      />
                    </a-popconfirm>
                  </a-tooltip>
                </a-space>
              </template>
            </a-table-column>
          </TableTurn>
        </a-tab-pane>
      </a-tabs>
      <AddProblem
        v-model:visible="modalVisible"
        :list="currList"
        @AddProblemEmit="AddProblemEmit"
      >
      </AddProblem>
    </div>
  </ContentCard>
</template>
<script setup lang="ts">
import {
  GetLeaveProblemList,
  PostLeaveProblemList,
  DelLeaveProblemList,
  PutLeaveProblemList
} from '@/apis/management/human/baseSetting/leaveSetting';
import clonedeep from 'lodash.clonedeep';
import { Message, Modal } from '@arco-design/web-vue';
import AddProblem from './Components/AddProblem/index.vue';

let curTab = ref(1); // 储存当前选中的标签
let tableRef = ref(); // 储存审核中表格的ref
let table = ref(); // 储存审核后表格的ref
let searchVal = ref(''); // 输入框的值
let modalVisible = ref(false); // 是否显示弹出框'

// 新增问题
const add = () => {
  currList.value = {};
  modalVisible.value = true;
};

// 表格配置
const args = reactive({
  rowSelection: {
    type: 'checkbox',
    showCheckedAll: true,
    onlyCurrent: false
  }
});

/* 储存选择的数据 */
const selectedList1 = computed(() => tableRef.value.selectedList); // 审核中
const selectedList2 = computed(() => table.value.selectedList); // 审核后

const tabChange = (key: number) => {
  curTab.value = key;
};

// 获取审核中表格数据
const getData1 = async (pageData: any) => {
  try {
    const res = await GetLeaveProblemList({
      ...pageData,
      search: searchVal.value,
      scopeApply: 1
    });
    return Promise.resolve(res);
  } catch (error: unknown) {
    console.log(error);
  }
};

// 获取审核后表格数据
const getData2 = async (pageData: any) => {
  try {
    const res = await GetLeaveProblemList({
      ...pageData,
      search: searchVal.value,
      scopeApply: 2
    });
    return Promise.resolve(res);
  } catch (error: unknown) {
    console.log(error);
  }
};

// 点击搜索按钮
const onSearch = () => {
  console.log(curTab.value);
  refresh();
};

// 监听键盘回车，按了回车也会查询
const keyDown = (e: any) => {
  if (e.keyCode === 13) {
    refresh();
  }
};

onMounted(() => {
  // 监听键盘事件
  window.addEventListener('keydown', keyDown);
});

let currList = ref(); // 储存当前行数据
// 点击编辑按钮
const goEdit = (record: any) => {
  currList.value = clonedeep(record);
  modalVisible.value = true;

  //
};

// 批量删除
const remove = async (id: number) => {
  try {
    if (!id) {
      let selectedList =
        curTab.value === 1 ? selectedList1.value : selectedList2.value;
      if (selectedList.length === 0) {
        Message.error('请至少选择一项！');
      } else {
        Modal.confirm({
          title: '提示',
          content: '确定要删除选中的数据吗？',
          onOk: async () => {
            try {
              await DelLeaveProblemList({
                ids: selectedList
              });
              tableRef.value.selectedList = [];
              refresh();
            } catch (error: unknown) {
              console.log(error);
            }
          }
        });
      }
    } else {
      await DelLeaveProblemList({
        ids: [id]
      });
      tableRef.value.selectedList = [];
      refresh();
    }
  } catch (error: unknown) {
    console.log(error);
  }
};

// 弹出框自定义事件
const AddProblemEmit = async (formData: any) => {
  try {
    // 编辑
    if (formData.id) {
      await PutLeaveProblemList(formData);
    } else {
      await PostLeaveProblemList(formData);
    }
    currList.value = {};
    // 两边列表都要重新刷新，因为可能改了状态
    tableRef.value.loadData();
    table.value.loadData();
  } catch (error: unknown) {
    console.log(error);
  }
};

// 刷新表格数据
const refresh = () => {
  if (curTab.value === 1) tableRef.value.loadData();
  else table.value.loadData();
};
</script>
<style lang="less" scoped>
.wrap {
  padding: 10px 20px;
  .header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
  }
}
</style>
